<script lang="ts" setup>
import { inject, getCurrentInstance, onMounted, onUpdated } from "vue"

const props = defineProps<{ title?: string }>()
const instance = getCurrentInstance();
const activedKey = inject("activedKey")
const tabs = inject<any>("tabs")

onUpdated(() => {
    if (instance) {
        const finded = tabs.value.find((item: any) => item.key === instance.vnode.key)
        if (finded) {
            finded.title = props.title
            finded.key = instance.vnode.key
        }
    }
})

onMounted(() => {
    if (instance) {
        const finded = tabs.value.find((item: any) => item.key === instance.vnode.key)
        if (!finded) {
            tabs.value.push({
                title: props.title,
                key: instance.vnode.key
            })
        }
    }
})

</script>

<template>
    <div class="umrp-panel">
        <div v-if="instance?.vnode.key === activedKey">
            <slot></slot>
        </div>
    </div>
</template>
